<template>
    <Editor :value="value" 
    :plugins="plugins" 
    @change="handleChange" 
    :mode="mode" 
    style="min-width: 1200px; 
    "/>
  </template>
<style scoped>
</style>

<script setup lang="ts">
import gfm from '@bytemd/plugin-gfm'
import highlight from '@bytemd/plugin-highlight';
import { Editor, Viewer } from '@bytemd/vue-next'
import { ref } from 'vue';

interface Props{
    value:String;
    mode?: String,
    handleChange:(v:string)=>void;
  }
  
  const plugins = [
    gfm(),
    highlight(),
    // Add more plugins here
  ]

  const props=withDefaults(defineProps<Props>(),{
     value:() => "",
     mode:() => "split",
     handleChange:(v:string)=>{
        console.log(v);
     },
  });
</script>